<template>
  <div
    ref="Monitoring"
    :class="isFullscreen ? 'monitoring-active' : 'monitoring'"
  >
    <div class="head">
      <div class="screen" @click="LargeScreen">
        {{ isFullscreen ? "退出" : "全屏" }}
      </div>
      <div class="title">科昂诗工业互联实时监控</div>
    </div>
    <el-row :gutter="20" class="interval">
      <!-- 状态监控 -->
      <el-col :span="6">
        <div class="grid-content bg-purple ">
          <div class="content-frame-list ">
            <div class="subtitle">生产机器状态</div>
            <oper-ation />
          </div>
        </div>
      </el-col>
      <!-- 中间显示屏 -->
      <el-col :span="12">
        <real-time />
      </el-col>
      <el-col :span="6">
        <!-- 故障监控 -->
        <div class="grid-content bg-purple">
          <div class="content-frame-list ">
            <div class="subtitle">机器故障信息</div>
            <div class="machine-list">
              <div class="fault-name clearfix">
                <div class="fault-machine fl">故障机器名称</div>
                <div class="fault-machine fl">故障时间</div>
              </div>
              <ul class="fault-box">
                <li
                  class="clearfix"
                  v-for="(fault, index) in ErrorListing"
                  :key="index"
                >
                  <div class="fault-news fl">{{ fault.name }}</div>
                  <div class="fault-news fl">
                    {{ Number(fault.t) | mmsgFormat }}
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 动力监控 -->
    <el-row :gutter="20" class="interval">
      <!-- 机器生产动力 -->
      <el-col :span="12">
        <div class="data-entry bg-purple">
          <div class="content-frame ">
            <div class="subtitle">生产看板</div>
            <production />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="data-entry bg-purple">
          <div class="content-frame ">
            <div class="subtitle">机器性能稼动率</div>
            <activ-ation />
          </div></div
      ></el-col>
    </el-row>
  </div>
</template>
<script>
// 引入到时需要删除 模拟数据
// 引入vueX数据管理中心
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapState } = createNamespacedHelpers("menuModule");
// 引入全屏插件
import screenfull from "screenfull";
// 引入元素监听大小
import ElementMonitor from "element-resize-detector";
// 引入组件
import RealTime from "@/components/monitoring/RealTime";
import ActivAtion from "@/components/monitoring/ActivAtion";
import OperAtion from "@/components/monitoring/OperAtion";
import Production from "@/components/monitoring/Production";
export default {
   beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next((vm) => {
      if (from.name == null) {
        vm.isFullscreen = true;
      }
    });
  },
  data() {
    return {
      //默认不全屏
      isFullscreen: false,
      // 当前时间
      timestamp: 0,
      // 实时数据
      RealTimeData: {
        // mqqtt数据传输过来订阅主题
        mtopic: "006PLC",
      },
      // 状态数据图表数据end
      // 异常情况数据
      anomaly: {
        series: [
          {
            name: "故障情况",
            type: "pie",
            radius: ["30%", "50%"],
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              { value: 335, name: "冲床" },
              { value: 310, name: "机器人" },
              { value: 234, name: "送料机" },
            ],
          },
        ],
      },
      // 异常情况数据end
      // 左边机器运行状态数据
      StateList: [],
      // 右边故障列表
    };
  },

  // 注册组件
  components: {
    RealTime,
    ActivAtion,
    OperAtion,
    Production,
  },

  computed: {
    // 解析vueX的state文件
    ...mapState(["DieChange_State", "ErrorListing"]),
  },

  //  生命周期数据渲染后
  created() {

    this.newest();
    this.client = this.$mqtt.connect("ws:192.168.3.59:9001");
    // this.client = this.$mqtt.connect("ws:139.155.149.87:9001");
    this.client.on("connect", (e) => {
      console.log("连接成功==>", e);
      //   // 输入订阅主题
      this.client.subscribe(this.RealTimeData.mtopic, (err) => {
        //     // 判断如果没有出错返回订阅成功
        if (!err) {
          console.log("订阅成功:" + this.RealTimeData.mtopic);
        }
      });
    });
    // // 接收消息
    this.client.on("message", (topic, message) => {
      //   // console.log("订阅主题==>", topic);
      //   // console.log("接收数据==>", message);
      //   // 转换为JOSN格式
      let mqtts = JSON.parse(message);
      // console.log("接收mqtt数据==>", mqtts);
      if (message != "") {
        this.MqttData(mqtts);
      }
    });
  },
  // 生命周期页面加载后
  mounted() {},
  methods: {
    ...mapMutations([
      "getStatus_Lamp",
      "getFeeder_State",
      "getDieChange_State",
      "getFixture01_State",
      "getFixture02_State",
      "getFixture03_State",
      "getFixture04_State",
      "getFixture05_State",
      "getPunch01_State",
      "getPunch02_State",
      "getPunch03_State",
      "getPunch04_State",
      "getPunch05_State",
      "getRobot01_State",
      "getRobot02_State",
      "getRobot03_State",
      "getRobot04_State",
      "getRobot05_State",
      "getYield_State",
    ]),

    //  处理mqtt传过来的数据
    MqttData(mqtts) {
      //  setInterval(() => {

      if (mqtts.datas[17].v == 0) {
        mqtts.datas[17].v = 1;
      } else {
        mqtts.datas[17].v = 0;
      }
      console.log(mqtts.datas[18]);

      let lamp = mqtts.datas.slice(0, 10);
      let feeder = mqtts.datas.slice(10, 17);
      let dieChange = mqtts.datas.slice(17, 28);
      let fixture01 = mqtts.datas.slice(28, 35);
      let fixture02 = mqtts.datas.slice(35, 42);
      let fixture03 = mqtts.datas.slice(42, 49);
      let fixture04 = mqtts.datas.slice(49, 56);
      let fixture05 = mqtts.datas.slice(56, 63);
      let punch01 = mqtts.datas.slice(63, 76);
      let punch02 = mqtts.datas.slice(76, 89);
      let punch03 = mqtts.datas.slice(89, 102);
      let punch04 = mqtts.datas.slice(102, 115);
      let punch05 = mqtts.datas.slice(115, 128);
      let robot01 = mqtts.datas.slice(128, 148);
      let robot02 = mqtts.datas.slice(148, 168);
      let robot03 = mqtts.datas.slice(168, 188);
      let robot04 = mqtts.datas.slice(188, 208);
      let robot05 = mqtts.datas.slice(208, 228);
      let yields = mqtts.datas.slice(228, 234);
      this.getStatus_Lamp({ valu: lamp });
      this.getFeeder_State({ valu: feeder });
      this.getDieChange_State({ valu: dieChange });
      this.getFixture01_State({ valu: fixture01 });
      this.getFixture02_State({ valu: fixture02 });
      this.getFixture03_State({ valu: fixture03 });
      this.getFixture04_State({ valu: fixture04 });
      this.getFixture05_State({ valu: fixture05 });
      this.getPunch01_State({ valu: punch01 });
      this.getPunch02_State({ valu: punch02 });
      this.getPunch03_State({ valu: punch03 });
      this.getPunch04_State({ valu: punch04 });
      this.getPunch05_State({ valu: punch05 });
      this.getRobot01_State({ valu: robot01 });
      this.getRobot02_State({ valu: robot02 });
      this.getRobot03_State({ valu: robot03 });
      this.getRobot04_State({ valu: robot04 });
      this.getRobot05_State({ valu: robot05 });
      this.getYield_State({ valu: yields });

      // console.log(mqtts);
      //  },1)
    },

   
   
    //  状态码

    async FaultDisplay() {
      // 机器人故障
      for (let i = 0; i < this.realTime.robotFault.length; i++) {
        if (this.realTime.robotFault[i].v != 0) {
          this.realTime.robotFault[i].name = i + "号机器人故障";
          this.errorListing.unshift(this.realTime.robotFault[i]);

          await this.$notify({
            type: "error",
            title: this.realTime.robotFault[i].name,
            message: "请派人查看维修",
          });
        }
      }
      // 冲床故障
      for (let j = 0; j < this.realTime.punchFault.length; j++) {
        if (this.realTime.punchFault[j].v != 0) {
          this.realTime.punchFault[j].name = j + "号冲床故障";
          this.errorListing.unshift(this.realTime.punchFault[j]);
          await this.$notify({
            type: "error",
            title: this.realTime.punchFault[j].name,
            message: "请派人查看维修",
          });
        }
      }
      // 送料机故障
      if (this.realTime.feederault[0].v != "0") {
        this.realTime.feederault[0].name = "三合一送料机故障";
        this.errorListing.unshift(this.realTime.feederault[0]);
        await this.$notify({
          type: "error",
          title: this.realTime.feederault[0].name,
          message: "请派人查看维修",
        });
      }
    },
    newest() {
      this.axios({
        method: "get",
        url: "/get_plan_out",
      })
        .then((res) => {
          console.log("最新计划产量计划投入数量==>", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
     exitScreen() {
      let el = document;
      let cfs =
        el.cancelFullScreen ||
        el.webkitCancelFullScreen ||
        el.mozCancelFullScreen ||
        el.exitFullScreen;
      //typeof cfs != "undefined" && cfs
      if (cfs) {
        cfs.call(el);
      } else if (typeof window.ActiveXObject !== "undefined") {
        //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    async fullScreen() {
      let el = document.documentElement;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
      if (typeof rfs != "undefined" && rfs) {
        await rfs.call(el);
      }
      return;
    },
     // 全屏
    LargeScreen() {
      // screenfull.toggle();
      if (this.isFullscreen == false) {
        this.$message.success("全屏");
        this.fullScreen();
      } else {
        this.$message.success("退出全屏");
        this.exitScreen();
      }
      this.isFullscreen = !this.isFullscreen;
    },
    checkFull() {
      let isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      //to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
  },
  // 故障列表显示
};
</script>
<style lang="less" scoped>
@import "../../assets/css/monitoring.less";
</style>
